<template>
  <section v-loading="loading" class="cms-body">
    <div class="cms-list-header flex-between">
      <el-button type="primary" icon="el-icon-plus" @click="routerLink('/pushTask/save','save',0)"
                 v-perms="'/pushTask/save'">添加
      </el-button>
      <div>
        <el-select v-model="params.status" @change="goQuery()">
          <el-option label="推送状态" value=""></el-option>
          <el-option label="待推送" value="0"></el-option>
          <el-option label="推送成功" value="1"></el-option>
          <el-option label="推送失败" value="2"></el-option>
          <el-option label="推送关闭" value="3"></el-option>
        </el-select>
        <cms-input v-model="params.title" label="标题"></cms-input>
        <el-button @click="goQuery()">查询</el-button>
      </div>
    </div>

    <el-table :data="tableData" stripe style="width: 100%" @selection-change="checkIds">
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column prop="contentId" label="文章ID" align="center"></el-table-column>
      <el-table-column prop="realName" label="创建者" align="center"></el-table-column>
      <el-table-column prop="androidStatus" label="安卓设备" align="center">
        <div slot-scope="scope">
          <span v-if="scope.row.androidStatus==0">否</span>
          <span v-if="scope.row.androidStatus==1" style="color:green">是</span>
        </div>
      </el-table-column>
      <el-table-column prop="iosStatus" label="苹果设备" align="center">
        <div slot-scope="scope">
          <span v-if="scope.row.iosStatus==0">否</span>
          <span v-if="scope.row.iosStatus==1" style="color:green">是</span>
        </div>
      </el-table-column>
      <el-table-column prop="title" label="文章标题" width="300" align="left"></el-table-column>
      <el-table-column prop="channelName" label="频道" align="center"></el-table-column>
      <el-table-column prop="pushType" label="推送类型" align="center">
        <div slot-scope="scope">
          <span v-if="scope.row.pushType==0">立即</span>
          <span v-if="scope.row.pushType==1">定时</span>
        </div>
      </el-table-column>
      <el-table-column prop="taskTime" label="定时日期" align="center"></el-table-column>
      <el-table-column prop="status" label="推送状态" align="center">
        <div slot-scope="scope">
          <span v-if="scope.row.status==0">待推送</span>
          <span v-if="scope.row.status==1" style="color: green">成功</span>
          <span v-if="scope.row.status==2" style="color: red">失败</span>
          <span v-if="scope.row.status==3" style="color: blue">已关闭</span>
        </div>
      </el-table-column>

      <el-table-column prop="createTime" label="创建日期" align="center"></el-table-column>
      <el-table-column prop="completeTime" label="推送日期" align="center"></el-table-column>

      <el-table-column label="操作" align="center">
        <div slot-scope="scope">
          <a href="javascript:void(0)" class="cms-table-button el-icon-circle-close"
             @click="cancelPushTask(scope.row,'取消')" :class="type" title="取消推送" v-perms="'/pushTask/cancel'"></a>
        </div>
      </el-table-column>

    </el-table>

    <!-- 表格底部 -->
    <div class="cms-list-footer">
      <div class="cms-left"></div>
      <!-- cms分页组件 -->
      <cms-pagination :total="total" @change="getPages"></cms-pagination>
    </div>

  </section>
</template>

<script>
  import listMixins from '@/mixins/list'

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {//只需要业务参数
          pageNo: 1,
          pageSize: 10,
          msgStatus: '',
          msgTitle: ''
        },
        type:''
      };
    },
    methods: {
      cancelPushTask(pushTask, remark) {
        if (pushTask.status != 0) {
          this.errorMessage('该推送无法取消');
          return;
        }
        let url = this.$api.pushTaskCancel;
        this.$confirm('是否确认' + remark + '?', '警告', {type: 'error'}).then(mes => {
          this.loading = true
          this.$http.post(url, {pushId: pushTask.id}).then(res => {
            if (res.code == "200") {
              this.successMessage(remark + '成功');
              this.getTableData(this.params);
            }
          });
        }).catch(error => {
          this.loading = false
        })
      },
    },
    created() {
      this.initTableData(this.$api.pushTaskPageList, this.params);
    }
  };
</script>

<style scoped>
  /*取消*/
  .el-icon-circle-close {
  	display: inline-block;
  	width: 24px;
  	height: 24px;
  	line-height: 1;
  	border-radius: 4px;
  	color: #fff;
  	position: relative;
  	text-align: center;
  	font-size: 14px;
  	top: -2px;
  	margin-left: 2px;
  	-webkit-transition: 0.2s;
  	transition: 0.2s;
  	background: #409eff!important;
  }

  .el-icon-circle-close:before {
  	position: relative;
  	top: 5px;
  }
</style>
